<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>005_图片定时切换</title>
    <style type="text/css">
        .box {
            width: 800px;
            height: 600px;
            background-color: red;
            position: absolute;
            left: 400px;
            top: 50px;
        }

        .box img {
            border: green solid 1px;
            width:100%;
            height:100%;
            display:block;
        }
    </style>
</head>
<body>
    <div class="box">
        <img id="img1" src="img/01.jpg" alt="炫光" />
    </div>

    <button id="btn">请开始你的表演</button>
    <button id="stop">请停止你的表演</button>
<script type="text/javascript">
    /**
     * 要求：图片自动切换
     */

    var img1 = document.getElementById("img1");
    var btn = document.getElementById("btn");
    var stop = document.getElementById("stop");

    var imgArr = ['img/01.jpg', 'img/02.jpg', 'img/03.jpg', 'img/04.jpg', 'img/05.jpg'];

    var index = 0;

    var timer;

    btn.onclick = function () {

        /**
         * 目前，我们每点击一次按钮就会开启一个定时器，点击多次就会开启多个定时器，这就导致图片的切换速度过快，并且我们只能关闭最后一个开启的定时器。
         *
         * 所以在开启定时器之前，需要将当前元素的上一个定时器关闭
         */
        clearInterval(timer);

        // 开启定时器，来自动切换图片
        timer = setInterval(function () {
            index++;
            if(index >= imgArr.length) {
                index =0;
            }
            img1.src = imgArr[index];

        }, 1000);
        return false;
    };
    stop.onclick = function () {
        clearInterval(timer);
    };


</script>
</body>
</html>